<template>
  <div class="chart_bot1">
    <div class="chart_bot1_l">
      <div class="chart_bot1-title">按照问题类型</div>
      <div id="chart_bot1_l" />
    </div>
    <div class="chart_bot1_r">
      <div class="chart_bot1-title">按照整改方式</div>
      <div id="chart_bot1_r" />
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      data: [
        {
          name: '厅局自主整改',
          value: '1235'
        },
        {
          name: '厅局在编办\n指导下整改',
          value: '120'
        },
        {
          name: '编办整改',
          value: '88'
        }
      ],
      offsetData: [
        [75, 90],
        [30, 90],
        [50, 42]
      ],
      symbolSizeData: [180, 160, 120],
      datas: [],
      option1: {
        grid: {
          show: false,
          top: 80,
          bottom: 10
        },
        xAxis: {
          type: 'value',
          show: false,
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameGap: 5
        },
        yAxis: {
          min: 0,
          show: false,
          max: 100,
          nameLocation: 'middle',
          nameGap: 30
        },
        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#00acea'
              }
            },
            data: []
          }
        ]
      },
      // chart1的配置
      option: {
        textStyle: {
          fontSize: 14
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            }
          }
        },
        calculable: true,
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c}个'
        },

        calculable: true,
        legend: {
          show: true,
          icon: 'circle',
          x: 'center',
          y: '5%',
          data: [
            '机构设置',
            '人员编制',
            '领导职数配备',
            '编制方案落实',
            '其他'
          ],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '问题分类',
            type: 'pie',
            radius: [40, 125],
            avoidLabelOverlap: false,
            startAngle: 0,
            center: ['48%', '30%'],
            roseType: 'area',
            selectedMode: 'single',
            label: {
              normal: {
                show: true,
                formatter: '{c} ({d}%)'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                smooth: false,
                length: 20,
                length2: 10
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {
                value: 600,
                name: '机构设置',
                itemStyle: {
                  normal: {
                    color: '#FA5A53'
                  }
                },
                label: {
                  color: '#FFFFFF'
                }
              },
              {
                value: 1100,
                name: '人员编制',
                itemStyle: {
                  normal: {
                    color: '#E29052'
                  }
                },
                label: {
                  color: '#FFFFFF'
                }
              },
              {
                value: 1200,
                name: '领导职数配备',
                itemStyle: {
                  normal: {
                    color: '#09bcb7'
                  }
                },
                label: {
                  color: '#FFFFFF'
                }
              },
              {
                value: 1300,
                name: '编制方案落实',
                itemStyle: {
                  normal: {
                    color: '#8bd46e'
                  }
                },
                label: {
                  color: '#FFFFFF'
                }
              },
              {
                value: 1400,
                name: '其他',
                itemStyle: {
                  normal: {
                    color: '#44aff0'
                  }
                },
                label: {
                  color: '#FFFFFF'
                }
              },
              {
                value: 0,
                name: '',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ]
      }
    }
  },
  created() {},
  watch: {
    // activeTab(val) {
    //   console.log('新输入的值为：'+val); // 会输出新值
    // }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    this.drawEcharts()
  },
  methods: {
    drawEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart_bot1_l'))
      var myChart2 = this.$echarts.init(document.getElementById('chart_bot1_r'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart2.clear()

      let aa = this.data
      for (var i = 0; i < aa.length; i++) {
        var item = aa[i]

        this.datas.push({
          name: item.name + '\n' + item.value + '个',
          value: this.offsetData[i],
          symbolSize: this.symbolSizeData[i],
          label: {
            normal: {
              textStyle: {
                fontSize: 22,
                color: '#ffffff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [
                {
                  offset: 0,
                  color: 'rgba(0, 191 ,255,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 191 ,255,0.8)'
                }
              ]),
              opacity: 0.8,
              shadowColor: '#2e78eca8',
              shadowBlur: 10,
              shadowOffsetX: 1,
              shadowOffsetY: 1
            }
          }
        })
      }
      this.option1.series[0].data = this.datas

      this.option && myChart.setOption(this.option)
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)

      this.option1 && myChart2.setOption(this.option1)
      // 响应式变化
      window.addEventListener('resize', () => myChart2.resize(), false)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart_bot1 {
  float: left;
  width: calc(50% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
}
.chart_bot1_l {
  float: left;
  width: 50%;
  height: 100%;
  padding: 0 20px 10px 20px;
}
.chart_bot1_r {
  float: left;
  width: 50%;
  height: 100%;
  padding: 0 20px 10px 20px;
}
.chart_bot1-title {
  font-weight: bold;
  height: 48px;
  line-height: 48px;
  display: flex;
  align-items: center;
  font-size: 18px;
  justify-content: center;
}
#chart_bot1_l {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
#chart_bot1_r {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>